<template>
    <PageTemplate>
    <div slot="content">
        <!-- <div class="brand">
			<breadcrumb :arrayName="brand" :hasIcon="false"></breadcrumb>
		</div> -->

        <div class="container">

            <el-row class="search">
                <div class="search-collapse">
                    <el-input :placeholder="$t('adt.task_des')" v-model="keysword" class="search-box"  >
                      <el-button slot="append" icon="el-icon-search" @click="commonSearch"></el-button>
                    </el-input>
                    <!-- <el-button size="small" slot="append" icon="el-icon-search" @click="commonSearch" class="btn-default search-btn"    ></el-button> -->
                </div>
                <el-collapse class="search-collapse-content" @change="advanceSearch"  accordion>
                    <el-collapse-item>
                        <template slot="title" class="search-collapse-title" >
                            <span class="vertical-bar"></span>&nbsp;&nbsp;
                            <span class="title-font" >{{$t(advSearch)}}</span>
                        </template>

                        <!-- 高级搜索具体内容 -->
                        <el-row :gutter="10" class="row-search" >
                            <el-col :span="2">
								<label class="label-search">{{$t('ndt.task_des')}}</label>
							</el-col>
							<el-col :span="6">
								<el-input v-model="taskDes"  class="input-small" ></el-input>
							</el-col>

							<el-col :span="2">
								<label class="label-search">{{$t('ndt.procName')}}</label>
							</el-col>
							<el-col :span="6">
								<el-input v-model="procName"  class="input-small" ></el-input>
							</el-col>

							<el-col :span="2">
								<label class="label-search">{{$t('ndt.originator')}}</label>
							</el-col>
							<el-col :span="6">
								<el-input v-model="launcher"  class="input-small" ></el-input>
							</el-col>
                        </el-row>

                        <!-- 查询和重置按钮-->
                        <el-row :gutter="10" class="row-search">
                            <div class="btn-group-search">
                                <el-col :span="2">&nbsp;</el-col>
                                <el-col :span="6">
                                    <el-button class="btn-default" @click="advanSearch"  size="small">{{$t('adt.query')}}</el-button>
                                    <el-button class="btn-second" @click="reset" style="margin:0;"  size="small" >{{$t('adt.reset')}}</el-button>
                                </el-col>
                            </div>
                        </el-row>
                    </el-collapse-item>    
                </el-collapse>
            </el-row>   
        
            <div style="height:15px;background-color:#F1F1F1;"></div>

            <el-row class="table-body">
                <el-table  :data="tableList" border  >
                    <el-table-column :label="$t('ndt.proc_pic')" width="80"  >
                        <template slot-scope="scope" >
                            <i style="cursor:pointer;" class="fa fa-file-powerpoint-o" @click="showProcPic(scope.row)" ></i>
                        </template>
                    </el-table-column>
                    <el-table-column type="index" :label="$t('cm.no')" width="55" ></el-table-column>
                    <el-table-column  :label="$t('ndt.task_des')" width="200" show-overflow-tooltip  >
                        <template slot-scope="scope" >
                            <a href="#" @click="gotoDetails(scope.row)">{{scope.row.folio}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="activityName" :label="$t('ndt.nowTask')"></el-table-column>
                    <el-table-column prop="processName" :label="$t('ndt.procName')"></el-table-column>

                    <el-table-column  prop="startUserCN" :label="$t('ndt.originator')"  ></el-table-column>
                    <el-table-column  prop="processStartTime" :label="$t('ndt.launch_time')" width="160"  ></el-table-column>
                    <el-table-column  :label="$t('ndt.operate')">
                        <template slot-scope="scope" >
                            <el-button  type="text" size="small" @click="hasRead(scope.row)" >{{$t('ndt.deal')}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>    
            </el-row>

            <el-row class="table-bottom">
                <el-pagination
                    @size-change="changeSize"
                    @current-change="changeCurrentPage"
                    @prev-click="prePage"
                    @next-click="nextPage"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-row>
        </div>
    </div>
    </PageTemplate>
</template>

<script>
import need_read_list2 from './js/need_read_list2'
export default need_read_list2
</script>

<style scoped>
.btn-default{
	color: rgb(255, 255, 255);
	background-color: rgb(0, 74, 134);
}
</style>